<template>
  <div class="art-container" ref="parent" @click="showMenu = false">
    <div class="art-top">
      <div class="art-search">
        <el-input
          placeholder="请输入关键字"
          v-model="queryParams.key"
          class="search-select"
          @keyup.native.enter="search"
          size="small"
          @clear="search"
          clearable
        ></el-input>
        <el-select
          v-model="queryParams.series"
          clearable
          @change="typeChange"
          class="search-select"
          placeholder="请选择艺术系列"
          size="small"
        >
          <el-option
            v-for="item in seriesList"
            :key="item.data_id"
            :label="item.series_name"
            :value="item.data_id"
          ></el-option>
        </el-select>

        <el-select
          v-model="queryParams.art_id"
          clearable
          placeholder="请选择艺术家"
          size="small"
          class="search-select"
          @change="typeChange"
        >
          <el-option v-for="item in userList" :key="item.data_id" :label="item.name" :value="item.data_id"></el-option>
        </el-select>

        <el-select v-model="optionValue" @change="typeChange" class="search-select" placeholder="请选择" size="small">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>

        <el-select
          v-model="queryParams.work_type"
          @change="typeChange"
          clearable
          class="search-select"
          placeholder="请选择作品类型"
          size="small"
        >
          <el-option v-for="item in workTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select
          v-model="queryParams.type"
          @change="typeChange"
          clearable
          class="search-select"
          placeholder="请选择艺术类型"
          size="small"
        >
          <el-option v-for="item in types" :key="item.data_id" :label="item.name" :value="item.data_id"></el-option>
        </el-select>
      </div>
      <div class="art-btn"><el-button type="primary" size="small" @click="isShowDialog = true">新增</el-button></div>
    </div>

    <el-scrollbar style="height: calc(100vh - 190px)" class="scrollbar" id="scroll-bar">
      <el-table :data="list" @row-contextmenu="contextMenu">
        <!-- recommend
        art_name
        type
        type_child
        opus_id
        thumbnail
        name -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.opus_id">
              <el-table-column label="大图" prop="video_name">
                <template slot-scope="subScope">
                  <el-image
                    style="width: 100px; height: 40px"
                    :src="getBigImg(subScope.row.id)"
                    @click="lookSomeBig(subScope.row)"
                    fit="cover"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="500">
                <template slot-scope="subScope">
                  <el-button type="danger" @click="delBig(props.row, subScope.row)" size="mini">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>

        <el-table-column label="艺术品" prop="name"></el-table-column>
        <el-table-column label="艺术家" prop="art_name"></el-table-column>
        <el-table-column label="作品类型" prop="work_type">
          <template slot-scope="scope">
            {{ scope.row.work_type == 1 ? '图片' : '视频' }}
          </template>
        </el-table-column>
        <el-table-column label="封面图">
          <template slot-scope="scope">
            <span>
              <el-image
                v-if="scope.row.thumbnail"
                style="width: 100px; height: 40px"
                :src="scope.row.thumbnail"
                :preview-src-list="[scope.row.thumbnail]"
                fit="cover"
              ></el-image>
              <span v-else>暂无图片</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="大图/视频">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.work_type == 1 && Array.isArray(scope.row.opus_id) && scope.row.opus_id.length > 0"
              style="width: 100px; height: 40px"
              :src="getBigImg(scope.row.opus_id[0].id)"
              @click="lookBig(scope.row)"
              fit="cover"
            ></el-image>
            <span v-else-if="scope.row.work_type == 2">
              {{ scope.row.work_video ? '已上传视频' : '未上传视频' }}
            </span>
            <span v-else>暂无图片</span>
          </template>
        </el-table-column>

        <el-table-column label="访问次数" prop="view_times"></el-table-column>
        <el-table-column label="收藏总数" prop="focus_total"></el-table-column>
        <el-table-column label="是否首页推荐" prop="association_job">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.recommend"
              @change="onRecommend(scope.row, 'home')"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否作品页推荐" prop="work_recommend">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.work_recommend"
              @change="onRecommend(scope.row, 'work')"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否售卖" prop="association_job">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_sell"
              @change="onIsSell(scope.row)"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="500" fixed="right">
          <template slot-scope="scope">
            <el-upload
              action="/ws"
              class="avatar-uploader"
              style="width: 90px; float: left"
              :show-file-list="false"
              :before-upload="
                (file) => {
                  beforeAvatarUpload(file, scope.row.data_id);
                }
              "
            >
              <el-button size="mini">上传封面</el-button>
            </el-upload>
            <el-button
              v-if="scope.row.work_type == 2"
              size="mini"
              style="margin-right: 10px"
              @click="updVideo(scope.row.data_id, scope.row)"
            >
              视频地址
            </el-button>
            <el-upload
              action="/ws"
              class="avatar-uploader"
              style="width: 90px; float: left"
              :show-file-list="false"
              :on-progress="uploadVideoProcess"
              :on-success="handleVideoSuccess"
              :before-upload="
                (file) => {
                  beforeMapUpload(file, scope.row);
                }
              "
            >
              <el-button size="mini">{{ scope.row.work_type == 1 ? '上传大图' : '上传视频' }}</el-button>
              <div class="process">
                <!-- <el-progress
                  style="margin: 5px"
                  :width="70"
                  color="#E0CBB4"
                  v-if="idCardIsUpload && activeDataId === scope.row.data_id && scope.row.work_type != 1"
                  :percentage="idCardUploadPercentage"
                ></el-progress> -->
                <!-- <div v-show="idCardUploadPercentage == 100">
                  上传完成
                </div> -->
              </div>
            </el-upload>
            <el-button type="primary" @click="onShowDrawer(scope.row)" size="mini">详情</el-button>
            <el-button type="primary" @click="updArt(scope.row.data_id, scope.row)" size="mini">修改</el-button>
            <el-button type="danger" @click="delArtis(scope.row.data_id)" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <paging ref="page" :func="getList"></paging>

    <el-dialog @closed="onVideoClose" title="提示" :visible.sync="isWorkVideo">
      <el-form :model="videoParams" :rules="videoRules" ref="videoParams" label-width="120px" class="demo-dataParams">
        <el-form-item label="视频地址" prop="work_video">
          <el-input v-model="videoParams.work_video" placeholder="请输入视频地址"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isWorkVideo = false">取 消</el-button>
        <el-button type="primary" @click="videoDialogConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog @closed="onClose" title="提示" :visible.sync="isShowDialog">
      <el-form :model="dataParams" :rules="rules" ref="dataParams" label-width="120px" class="demo-dataParams">
        <el-form-item label="作品名" prop="name">
          <el-input v-model="dataParams.name" placeholder="请输入作品名"></el-input>
        </el-form-item>
        <el-form-item label="作品详情" prop="work_detail">
          <el-input v-model="dataParams.work_detail" placeholder="请输入作品详情"></el-input>
        </el-form-item>
        <el-form-item label="作品说明" prop="work_explain">
          <el-input v-model="dataParams.work_explain" placeholder="请输入作品说明"></el-input>
        </el-form-item>
        <el-form-item label="作品介绍" prop="introduction">
          <el-input v-model="dataParams.introduction" placeholder="请输入作品介绍"></el-input>
        </el-form-item>
        <el-form-item label="艺术家" prop="art_id">
          <el-select
            v-model="dataParams.art_id"
            remote
            filterable
            :remote-method="remoteMethod"
            :loading="loading"
            @change="artChange"
          >
            <el-option
              v-for="item in userList"
              :key="item.data_id"
              :label="item.name"
              :value="item.data_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="艺术类型" prop="type">
          <el-cascader
            :emitPath="false"
            :show-all-levels="false"
            v-model="dataParams.type"
            :options="typeList"
            filterable
            :props="{ expandTrigger: 'hover', label: 'name', value: 'data_id', children: 'child_item_list' }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="作品类型" prop="work_type">
          <el-select v-model="dataParams.work_type" filterable>
            <el-option label="图片" :value="1"></el-option>
            <el-option label="视频" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否首页推荐" prop="recommend">
          <el-switch v-model="dataParams.recommend" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="是否作品页推荐" prop="work_recommend">
          <el-switch v-model="dataParams.work_recommend" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item v-if="dataParams.work_type == 1" label="是否出售" prop="is_sell">
          <el-switch v-model="dataParams.is_sell" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item v-if="dataParams.work_type == 1" label="价格区间" prop="price_min" class="item-price">
          <el-input v-model="dataParams.price_min" type="number" placeholder="请输入最低价"></el-input>
          &nbsp;&nbsp;-&nbsp;&nbsp;
          <el-input v-model="dataParams.price_max" type="number" placeholder="请输入最高价"></el-input>
        </el-form-item>

        <el-form-item v-if="dataParams.work_type == 1" label="画布材质" prop="material">
          <el-input v-model="dataParams.material" placeholder="请输入作品材质"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-drawer :title="obj.name" :visible.sync="isShowDrawer" direction="rtl">
      <div class="show-detail">
        <div class="detail-item">
          <div class="item-title">作品详情：</div>
          <div class="item-content">{{ obj.work_detail }}</div>
        </div>
        <div class="detail-item">
          <div class="item-title">作品说明：</div>
          <div class="item-content">{{ obj.work_explain }}</div>
        </div>
        <div class="detail-item">
          <div class="item-title">艺术家：</div>
          <div class="item-content">{{ obj.art_name }}</div>
        </div>
        <div class="detail-item">
          <div class="item-title">艺术类型：</div>
          <div class="item-content">{{ type + '&nbsp;&nbsp;-&nbsp;&nbsp;' + typeChild }}</div>
        </div>
        <div class="detail-item">
          <div class="item-title">是否首页推荐：</div>
          <div class="item-content">{{ obj.recommend ? '' : '不' }}推荐</div>
        </div>
        <div class="detail-item">
          <div class="item-title">作品类型</div>
          <div class="item-content">{{ obj.work_type == 1 ? '图片' : '视频' }}</div>
        </div>
        <div class="detail-item">
          <div class="item-title">是否作品页推荐：</div>
          <div class="item-content">{{ obj.work_recommend ? '' : '不' }}推荐</div>
        </div>
        <div class="detail-item">
          <div class="item-title">是否出售：</div>
          <div class="item-content">{{ obj.is_sell ? '' : '不' }}出售</div>
        </div>
        <div class="detail-item">
          <div class="item-title">价格区间：</div>
          <div class="item-content">{{ obj.price_min }}元&nbsp;&nbsp;-&nbsp;&nbsp;{{ obj.price_max }}元</div>
        </div>
        <div class="detail-item">
          <div class="item-title">画布材质：</div>
          <div class="item-content">{{ obj.material }}</div>
        </div>
        <div class="detail-item">
          <div class="item-title">访问次数：</div>
          <div class="item-content">{{ obj.view_times }}</div>
        </div>
        <div class="detail-item">
          <div class="item-title">收藏总数：</div>
          <div class="item-content">{{ obj.focus_total }}</div>
        </div>
        <div class="detail-item">
          <div class="item-title">创建时间：</div>
          <div class="item-content">{{ obj.create_time }}</div>
        </div>
      </div>
    </el-drawer>
    <div class="menu" ref="menu" v-show="showMenu">
      <div @click="move('up')">前移</div>
      <div @click="move('down')">后移</div>
      <div @click="move('top')">置顶</div>
      <div @click="move('bottom')">置底</div>
    </div>
  </div>
</template>

<script>
  import paging from '@/components/paging';
  import artisManage from '@/api/artis';
  import artManage from '@/api/works';
  import serieManage from '@/api/artSerie';
  import typeManage, { areistTypeManage } from '@/api/type';

  import { getImageUrl, getBigImg } from '@/utils/image';
  import { qiniuUploadFile } from '@/utils/QiniuUpload';
  export default {
    name: 'art-view',
    components: {
      paging,
    },
    data() {
      return {
        videoFlag: true,
        uploadVideoId: '',
        videoUploadPercent: 0,
        dataList: [],
        queryParams: {
          key: '',
          series: '',
        },
        workTypes: [
          {
            label: '图片',
            value: '1',
          },
          {
            label: '视频',
            value: '2',
          },
        ],
        options: [
          {
            value: 'all',
            label: '所有作品',
          },
          {
            value: 'recommend',
            label: '首页推荐作品',
          },
          {
            value: 'work_recommend',
            label: '作品页推荐作品',
          },
          {
            value: 'famous',
            label: '代表作品',
          },
        ],
        optionValue: 'all',
        seriesList: [],
        userList: [],
        typeList: [],
        list: [],
        option: {
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        },
        dataParams: {
          name: '', //姓名
          introduction: '',
          work_detail: '',
          work_type: '',
          recommend: false, //是否首页推荐
          work_recommend: false, //是否作品页推荐
          type: '', //类型
          art_id: '',
          art_name: '',
          material: '',
          is_sell: false,
          price_min: 0,
          price_max: 0,
          work_detail: '',
          work_explain: '',
        },
        idCardIsUpload: false,
        idCardUploadPercentage: 0,
        activeDataId: '',
        videoParams: {
          work_video: '',
        },
        obj: {},
        isWorkVideo: false,
        isShowDialog: false,
        isShowDrawer: false,
        updId: '',
        rules: {
          name: [{ required: true, message: '请输入作品名', trigger: 'blur' }],
          art_id: [{ required: true, message: '请选择艺术家', trigger: 'change' }],
          type: [{ required: true, message: '请选择艺术类型', trigger: 'change' }],
          work_type: [{ required: true, message: '请选择作品类型', trigger: 'change' }],
        },
        videoRules: {
          work_video: [{ required: true, message: '请输入视频地址', trigger: 'blur' }],
        },
        showMenu: false,
        menuId: '',
        resAttr: [],
        loading: false,
        types: [],
      };
    },
    async mounted() {
      let res = await serieManage.getSerie();
      this.seriesList = res.item_list;
      let userRes = await artisManage.getArtis({ notPagination: true });
      this.userList = userRes.item_list;
      this.refresh();
      let typesRes = await areistTypeManage.getRootType({ notPagination: true });
      this.types = typesRes.item_list;

      let resAttr = await typeManage.getTypeAttrs({ notPagination: true });
      this.resAttr = resAttr.item_list;
    },
    computed: {
      type() {
        let res = this.resAttr.find((item) => {
          return item.data_id === this.obj.type;
        });
        return res?.name;
      },
      typeChild() {
        let res = this.resAttr.find((item) => {
          return item.data_id === this.obj.type_child;
        });
        return res?.name;
      },
    },
    methods: {
      async remoteMethod(query) {
        // if (!query) return;
        this.loading = true;
        let userRes = await artisManage.getArtis({ key: query, notPagination: true });
        this.userList = userRes.item_list;
        this.loading = false;
      },
      // 查看大图
      lookBig(data) {
        if (data.opus_id && data.opus_id.length > 0) {
          let { BasicDraw, BigImageShow } = require('../../../utils/main');
          let basicDraw = new BasicDraw(); // 创建基础渲染类
          basicDraw.start(); // 开始渲染
          new BigImageShow().showBigImg(data.opus_id[0].id);

          document.getElementById('bigIamgeClose').addEventListener('click', (e) => {
            basicDraw.dispose();
            e.stopPropagation();
          });
        }
      },
      // 查看某个大图
      lookSomeBig(data) {
        let { BasicDraw, BigImageShow } = require('../../../utils/main');
        let basicDraw = new BasicDraw(); // 创建基础渲染类
        basicDraw.start(); // 开始渲染
        new BigImageShow().showBigImg(data.id);

        document.getElementById('bigIamgeClose').addEventListener('click', (e) => {
          basicDraw.dispose();
          e.stopPropagation();
        });
      },
      getBigImg,
      async move(type) {
        await artManage[
          this.optionValue == 'work_recommend' || this.optionValue == 'recommend' ? 'moveRecomment' : 'moveFamousArt'
        ](this.menuId, 'move_' + type);
        this.showMenu = false;
        this.$refs.page.refresh();
      },
      contextMenu(r, column, e) {
        if (
          this.optionValue === 'work_recommend' ||
          this.optionValue === 'recommend' ||
          this.optionValue === 'famous'
        ) {
          let rect = this.$refs.parent.getBoundingClientRect();
          this.$refs.menu.style.top = e.clientY - rect.top + 'px';
          this.$refs.menu.style.left = e.clientX - rect.left + 'px';
          this.showMenu = true;
          this.menuId = r.data_id;
          e.preventDefault();
        }
      },
      getImageUrl,
      refresh() {
        this.$refs.page.refresh();
      },
      search() {
        this.$refs.page.search();
      },
      typeChange() {
        this.$refs.page.refresh();
      },
      async artChange(id) {
        let typeRes = await typeManage.getTypeAttrs({ notPagination: true, art_id: id });
        this.typeList = typeRes.item_list.filter((item) => {
          return item.parent_id === -1 && item.child_item_list.length;
        });

        let obj = this.userList.find((item) => {
          return (item.data_id = id);
        });
        this.dataParams.art_name = obj.name;
      },
      getList(callback) {
        if (!this.queryParams.work_type) delete this.queryParams.work_type;
        if (this.optionValue === 'recommend' || this.optionValue === 'work_recommend') {
          artManage.getRecommentArt(this.queryParams).then((res) => {
            let total = res.total_count;
            this.list = res.item_list;
            callback(this.list, total);
          });
        } else if (this.optionValue === 'famous') {
          artManage.getFamousArt(this.queryParams).then((res) => {
            let total = res.total_count;
            this.list = res.item_list;
            callback(this.list, total);
          });
        } else {
          artManage.getArt(this.queryParams).then((res) => {
            let total = res.total_count;
            this.list = res.item_list;
            callback(this.list, total);
          });
        }
      },
      async beforeAvatarUpload(file, id) {
        let res = await qiniuUploadFile(file, 'artworks');
        if (res) {
          await artManage.updArt(id, { thumbnail: res.key });
          this.refresh();
        }

        // const formData = new FormData();
        // formData.append('上传的key值', file);
        // await artManage.setArtImage(id, formData);
        // this.refresh();
      },
      async beforeAvatarUploadVideo(file, id) {
        const formData = new FormData();
        formData.append('filename', file);
        await artManage.uploadVideo(id, formData);
        this.refresh();
      },
      handleVideoSuccess(res, file) {
        //视频上传成功之后返回视频地址
        this.videoFlag = false;
        this.videoUploadPercent = 0;
      },
      uploadVideoProcess(event, file, fileList) {
        this.videoFlag = true;
        this.videoUploadPercent = file.percentage.toFixed(2);
        // console.log(file.percentage.toFixed(2));
        // console.log('this.videoUploadPercent', file.percentage);
      },
      async beforeMapUpload(file, row) {
        const formData = new FormData();
        formData.append(row.work_type == 1 ? '上传的key值' : 'filename', file);
        this.$loading(this.option);
        this.uploadVideoId = row.data_id;
        this.videoUploadPercent = 0;
        // const timer = setInterval(() => {
        //   if (this.videoUploadPercent >= 99) {
        //     this.videoUploadPercent = 100;
        //     this.videoFlag = false;
        //     clearInterval(timer);
        //     return;
        //   }
        //   this.videoUploadPercent += 1;
        // }, 20);
        if (row.work_type == 1) {
          let res = await qiniuUploadFile(file, 'artworks');
          if (res) {
            let url = res.key;

            let opus_id = await artManage.imageMap({
              image_list: [
                {
                  image_src_url: url,
                  image_src_type: 'local',
                  image_name: url.split('/')[2],
                  type: 1,
                  access_type: 0,
                  note: '',
                },
              ],
            });
            if (opus_id) {
              this.videoUploadPercent = 100;
              this.videoFlag = false;
              this.$message.success('上传成功');
            }
            opus_id = row.opus_id && row.opus_id.length ? row.opus_id.concat(opus_id) : opus_id;
            await artManage.updArt(row.data_id, { opus_id });
          }

          // let url = await artManage.uploadMap(formData);
          // let opus_id = await artManage.imageMap({
          //   image_list: [
          //     {
          //       image_src_url: url,
          //       image_src_type: 'local',
          //       image_name: url.split('/')[2],
          //       type: 1,
          //       access_type: 0,
          //       note: '',
          //     },
          //   ],
          // });
          // if (opus_id) {
          //   this.videoUploadPercent = 100;
          //   this.videoFlag = false;
          //   this.$message.success('上传成功');
          //   // clearInterval(timer);
          // }
          // console.log(opus_id);
          // opus_id = row.opus_id && row.opus_id.length ? row.opus_id.concat(opus_id) : opus_id;
          // await artManage.updArt(row.data_id, { opus_id });
        } else {
          this.activeDataId = row.data_id;

          let res = await qiniuUploadFile(file, 'artworks', (progressEvent) => {
            if (progressEvent.lengthComputable) {
              console.log(progressEvent);
              this.idCardIsUpload = true; // 显示进度条
              this.idCardUploadPercentage = parseInt((progressEvent.loaded / progressEvent.total) * 100); // 动态获取文件上传进度
              console.log('idCardUploadPercentage', this.idCardUploadPercentage);
              if (this.idCardUploadPercentage >= 99) {
                this.idCardUploadPercentage = 99; // 一秒后关闭进度条
              }
              // this.showProcess(this.idCardIsUpload, this.idCardUploadPercentage)
            }
          });
          if (res) {
            let url = res.key;
            await artManage.updArt(row.data_id, { work_video: url });
            this.$message.success('上传成功');
          }

          // await artManage.uploadVideo(row.data_id, formData, (progressEvent) => {
          //   console.log('progressEvent', progressEvent);
          //   if (progressEvent.lengthComputable) {
          //     console.log(progressEvent);
          //     this.idCardIsUpload = true; // 显示进度条
          //     this.idCardUploadPercentage = parseInt((progressEvent.loaded / progressEvent.total) * 100); // 动态获取文件上传进度
          //     console.log('idCardUploadPercentage', this.idCardUploadPercentage);
          //     if (this.idCardUploadPercentage >= 99) {
          //       this.idCardUploadPercentage = 99; // 一秒后关闭进度条
          //     }
          //     // this.showProcess(this.idCardIsUpload, this.idCardUploadPercentage)
          //   }
          // });
          this.idCardIsUpload = false;
        }
        this.$loading().close();
        this.refresh();
      },
      onClose() {
        this.updId = '';
        this.dataParams = {
          name: '',
          comment: '',
          art_id: '',
          recommend: false, //是否推荐
          work_type: '',
          work_recommend: false, //是否推荐
          type: '', //类型
          art_name: '',
          is_sell: false,
          price_min: 0,
          price_max: 0,
          work_detail: '',
          work_explain: '',
        };
      },
      onVideoClose() {
        this.isWorkVideo = false;
        this.videoParams = {
          work_video: '',
        };
      },
      onShowDrawer(row) {
        this.isShowDrawer = true;
        this.obj = row;
      },
      async onRecommend(row, type) {
        if (type == 'home') {
          await artManage.updArt(row.data_id, { recommend: row.recommend });
        } else {
          await artManage.updArt(row.data_id, { work_recommend: row.work_recommend });
        }
        this.refresh();
      },
      async onIsSell(row) {
        await artManage.updArt(row.data_id, { is_sell: row.is_sell });
        this.refresh();
      },
      async updArt(data_id, row) {
        await this.artChange(row.art_id);
        this.dataParams = row;
        this.dataParams.type = [row.type, row.type_child];
        this.updId = data_id;
        this.isShowDialog = true;
      },

      async updVideo(data_id, row) {
        console.log(row);
        this.updId = data_id;
        this.videoParams.work_video = row.work_video;
        this.isWorkVideo = true;
      },
      async delArtis(data_id) {
        this.$alert('是否确定删除该艺术品', '删除', {
          confirmButtonText: '确定',
          callback: async (action) => {
            if (action === 'confirm') {
              await artManage.delArt(data_id);
              this.refresh();
            }
          },
        });
      },
      async delBig(row, data) {
        console.log(row, data);
        row.opus_id.forEach((item, index, arr) => {
          console.log(item);
          if (item.id === data.id) {
            arr.splice(index, 1);
          }
        });
        await artManage.updArt(row.data_id, { opus_id: row.opus_id });
      },
      async videoDialogConfirm() {
        let res = await artManage.updArt(this.updId, this.videoParams);
        if (res) {
          this.isWorkVideo = false;
          this.refresh();
        }
      },
      async dialogConfirm() {
        this.$refs.dataParams.validate(async (valid) => {
          if (valid) {
            let res = null;

            let types = this.dataParams.type;

            let params = {
              name: this.dataParams.name,
              comment: this.dataParams.comment,
              art_id: this.dataParams.art_id,
              recommend: this.dataParams.recommend, //是否首页推荐
              work_recommend: this.dataParams.work_recommend, //是否作品页推荐
              work_type: this.dataParams.work_type,
              type: types[0], //类型
              type_child: types[1],
              material: this.dataParams.material,
              art_name: this.dataParams.art_name,
              is_sell: this.dataParams.is_sell,
              price_min:
                this.dataParams.price_min > this.dataParams.price_max
                  ? Number(this.dataParams.price_max)
                  : Number(this.dataParams.price_min),
              price_max:
                this.dataParams.price_min > this.dataParams.price_max
                  ? Number(this.dataParams.price_min)
                  : Number(this.dataParams.price_max),
              work_detail: this.dataParams.work_detail,
              work_explain: this.dataParams.work_explain,
            };
            if (this.updId) {
              res = await artManage.updArt(this.updId, params);
            } else {
              res = await artManage.setArt(params);
            }
            if (res) {
              this.isShowDialog = false;
              this.refresh();
            }
          }
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  .menu {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 999;
    & > div {
      padding: 10px 40px;
      border-bottom: 1px solid #eee;
      &:last-child {
        border-bottom: none;
      }
      &:hover {
        cursor: pointer;
        background-color: #409eff;
        color: white;
      }
    }
  }
  .art-container {
    height: 100%;
    .art-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .art-search {
        display: flex;
        flex-wrap: wrap;
        .el-input {
          width: 220px;
        }
        .search-select {
          margin-right: 12px;
          margin-bottom: 6px;
        }
        .search-data {
          display: flex;
          div {
            margin-left: 12px;
          }
        }
      }
    }
  }
  .item-price {
    ::v-deep .el-form-item__content {
      display: flex;
      .el-input {
        width: 120px;
        .el-input__inner {
          width: 120px;
        }
      }
    }
  }
  .show-detail {
    .detail-item {
      width: 100%;
      display: flex;
      height: 40px;
      line-height: 40px;
      .item-title {
        width: 120px;
        text-align: right;
      }
      .item-content {
        color: #72767b;
      }
    }
  }
</style>
